<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { showToast } from "vant";
import { http } from "@/utils/http";
import { useLocationParams } from "@/store/useLocationStore";
import { useUserStore } from "@/store/useUserStore";
import useClipboard from "vue-clipboard3";

interface AuthInfo {
  auth: string;
}
const loading = ref(false);
const authInfo = ref<string | null>(null);

const { getAllParams, setParam } = useLocationParams();
const { ...otherParams } = getAllParams();
const userStore = useUserStore();
watch(authInfo, newVal => {
  if (newVal) {
    // 这里可以执行一些操作，比如更新用户信息
    setParam("auth", newVal);
  }
});
const getAuthInfo = async () => {
  try {
    loading.value = true;
    const data = await http.request<AuthInfo>({
      url: "/auth",
      method: "GET",
      // headers: { "No-Auth": true },
      data: {
        ...otherParams
      }
    });
    if (data) {
      authInfo.value = data.auth;
    }
  } catch (error) {
    showToast("获取信息失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getAuthInfo();
});

const handleCopy = async () => {
  // 将当前页面的 URL 复制到剪贴板
  const url = `${window.location.origin}${location.pathname}?${new URLSearchParams({ ...otherParams, auth: authInfo.value }).toString()}`;
  const { toClipboard } = useClipboard();
  try {
    await toClipboard(url);
    showToast("复制成功");
  } catch (error) {
    showToast("复制失败");
  }
};
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- 左上角装饰 -->
      <div
        class="absolute -left-16 -top-16 w-48 h-48 bg-blue-200 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 右上角装饰 -->
      <div
        class="absolute -right-16 top-32 w-64 h-64 bg-blue-300 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 底部装饰 -->
      <div
        class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-96 h-32 bg-blue-100 rounded-full opacity-30 blur-2xl"
      ></div>
      <!-- 波浪纹理 -->
      <div class="absolute inset-0 opacity-5">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <pattern
              id="wave"
              width="100"
              height="100"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M0 50 Q 25 25, 50 50 T 100 50"
                stroke="currentColor"
                fill="none"
                stroke-width="2"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#wave)" />
        </svg>
      </div>
    </div>

    <!-- 用户信息 -->
    <div
      class="flex-1 flex flex-col items-center justify-center px-6 relative z-10"
    >
      <div class="w-20 h-20 mb-4">
        <img
          src="https://api.dicebear.com/7.x/bottts/svg?seed=1"
          alt="avatar"
          class="w-full h-full rounded-lg shadow-lg"
        />
      </div>
      <div class="text-center">
        <div class="text-lg mb-1">你好!</div>
        <div class="text-xl font-medium text-blue-500 mb-1">
          {{ userStore.user?.wechatName }}
        </div>
        <div class="text-gray-500">ID: {{ userStore.user?.buyerUserId }}</div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="px-6 pb-8 relative z-10">
      <button
        @click="handleCopy"
        class="w-full py-3.5 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white text-lg font-medium active:opacity-90 transition-all duration-300 shadow-lg shadow-blue-300/30 hover:shadow-blue-300/50 hover:scale-[1.02]"
      >
        复制专属码
      </button>
    </div>

    <!-- Loading -->
    <van-overlay :show="loading" class="flex items-center justify-center">
      <van-loading type="spinner" color="#3b82f6" size="36px" />
    </van-overlay>
  </div>
</template>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}
</style>
